<template>
<div>
<!--1.导航-->
  <div>
    <van-nav-bar
        title="评论详情"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>

<!--  3.评论列表-->
  <div class="dv3">
    <div v-for="c in comments" @click="setId(c.userId)">
      <h4>{{c.userId}}-评论：{{c.content}}</h4>
    </div>
  </div>
<!--  4.发表评论-->
  <div class="dv4">
    <van-cell-group inset>
      <van-field
          v-model="comment.content"
          center
          :label="str1"
          label-width="2rem"
          clearable
          placeholder="请输入评论内容"
      >
        <template #button>
          <van-button size="small" type="primary" @click="send()">发表</van-button>
        </template>
      </van-field>
    </van-cell-group>

  </div>
</div>
</template>

<script>
export default {
  name: "ArticleCommentView",
  data(){
    return{
      /*article:{
        id:1
      },*/
      articleid:"",

      //articleId: ""

      str1:"评论",
      comment:{
        content: "",
        userId :0,
        parentId: 0,
        articleId:0
      },
      likes:0,
      comments:[//评论信息

      ]
    }
  },
  mounted() {
    //this.article=this.$store.state.article;
    // this.comment.articleId=this.article.id;
    this.articleid=this.$route.query.id;

    //this.comment.articleId=this.article.id;

    //this.comment.articleId=1;
    this.comment.articleId=this.$route.query.id;
    //请求接口 查询 当前动态的评论列表
    this.loadData();
  },methods:{
    back(){
      history.back();
    },
    loadData(){
      //请求接口 获取指定动态的评论列表
      this.axios.get("/api/articleComment/all.do?articleId="+this.articleid).then(r=>{
     /* this.axios.get("/api/articleComment/all.do?articleId="+this.article.id).then(r=>{*/
        if(r.data.code==200){
          this.comments=r.data.data;
        }
      });
    },
    send(){
      //请求接口 发表评论
      this.axios.post("/api/articleComment/save.do",this.comment).then(r=>{
        if(r.data.code==200){
          //成功
          this.loadData();
        }
      })
    },
    setId(id){
      this.comment.parentid=id;
      this.str1="回复"+id+":";
    },
  }
}
</script>

<style scoped>
.vi{
  margin: 5px;
  float: left;
  padding: 1px;
}
.p1{
  font-size: 9px;
  padding: 1px;
  margin: 1px;
  text-align: left;
}
.p2{
  padding: 1px;
  margin: 1px;
  text-align: left;
}
.dv1{
  text-align: left;
  margin: 20px;
}
.lb2{
  font-size: 9px;
  color: gray;
}
.dv2{
  margin-top: 5px;
  margin-bottom: 20px;
  background-color: white;
}
</style>